<template>
  <div class="uploadFile" v-if="!fileName" :class="{nobd: !switchConfig}">
    <a-upload-dragger
      ref="upFile"
      name="file"
      :multiple="true"
      :beforeUpload="beforeUpload"
      :showUploadList="false"
      :headers="{Authorization}"
      action="/jobboard/jobboardcandidates/hunter/upload"
      @change="handleChange"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">
        <!-- Click or drag file to this area to upload -->
        {{$t('candidateApplication.drag_file_here')}}
      </p>
      <p class="ant-upload-hint">
        {{$t('candidateApplication.file_size_20m')}}
        <span>{{$t('candidateApplication.file_type')}} "DOC", "doc", "DOCX", "docx", "HTML", "html", "PDF", "pdf", "TXT", "txt", "mht", "jpg", "bmp", "png" </span>
      </p>
    </a-upload-dragger>
  </div>
  <div class="uploadFile grey" v-else>
    <div>
      <div class="resumename">
        <i class="iconfont icon-wenjian" />
        <div>
          <a-tooltip>
            <template slot="title">
              {{fileName}}
            </template>
            <p class="elip">{{fileName}}</p>
          </a-tooltip>
          <p>{{fileSize}}</p>
        </div>
      </div>
      <!-- <a-button :loading="loading1" v-if="loading1">...</a-button> -->
      <a-button :loading="loading" v-if="loading">{{$t('candidateApplication.saving_file')}}...</a-button>
      <a-upload v-else :showUploadList="false" :beforeUpload="beforeUpload" :headers="{Authorization}" action="/jobboard/jobboardcandidates/hunter/upload" @change="handleChange">
        <a-button>{{$t('candidateApplication.resume_replace')}}</a-button>
      </a-upload>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'ResumeCnki',
  props: ['switchConfig', 'loading'],
  data () {
    return {
      fileName: '',
      fileSize: ''
    }
  },
  watch: {
  },
  computed: {
    ...mapState({
      Authorization: function (state) {
        let token = state.common.loginInfo && state.common.loginInfo.token
        return token
      }
    })
  },
  methods: {
    resumeChecks () {
      return new Promise((resolve, reject) => {
        this.form.validateFields((error, values) => {
          if (!error) {
            // 处理数据
            resolve(values)
          } else {
            reject(error)
          }
        })
      }).catch((e) => {
        console.log(e)
      })
    },
    handleChange (info) {
      let status = info.file.status
      if (status !== 'uploading') {
      }
      if (status === 'done') {
        this.fileName = info.file.name
        this.fileSize = info.file.size / 1024 > 1024 ? (info.file.size / 1024 / 1024).toFixed(2) + 'M' : (info.file.size / 1024).toFixed(2) + 'KB'
        let data = JSON.parse(JSON.stringify(info.file.response))
        delete data.message
        delete data.code
        this.$emit('upFile', data)
        this.$emit('loading', false)
        this.spinning = false
      } else if (status === 'error') {
        this.$emit('loading', false)
        this.spinning = false
        this.$message.error(info.file.response.message)
      } else if (status === 'removed') {
        this.$emit('loading', false)
        this.spinning = false
      }
    },
    beforeUpload (file) {
      // "DOC", "doc", "DOCX", "docx", "HTML", "html", "PDF", "pdf", "TXT", "txt", "mht", "jpg", "bmp", "png"
      const reg = /\.(DOC|doc|DOCX|docx|HTML|html|PDF|pdf|TXT|txt|mht|jpg|bmp|png)(\?.*)?$/
      return new Promise((resolve, reject) => {
        if (reg.test(file.name)) {
          const isLt20M = file.size / 1024 / 1024 < 20
          if (!isLt20M) {
            this.$message.error(this.$t('candidateApplication.file_size_20m'))
            return false
          }
          // this.fileList = [...this.fileList, file]
          this.$emit('loading', true)
          this.spinning = true
          resolve(file)
        } else {
          this.$message.error(`${this.$t('candidateApplication.correct_file_type')}`)
          reject(new Error(`${this.$t('candidateApplication.correct_file_type')}`))
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.ant-upload-hint
  span
    display block
    padding 0 12px
    font-size 12px
.nobd
  border none!important
.formData
  padding 0 24px
.red
  color errorColor
.green
  color lightGreen
.uploadFile
  border-top 1px solid borderColor
  text-align center
  padding 24px 0
  >span
    display flex
    justify-content center
  :global(.ant-upload.ant-upload-drag)
    width 65%
    height 65%
  &.grey
    display flex
    justify-content center
    p
      text-align left
    >div
      background eeeGrey
      border-radius 4px
      height 149px
      width 60%
      display flex
      align-items center
      justify-content center
      padding 12px
      i
        color var(--blue-500)
        font-size 36px
        margin-right 4px
      .resumename
        display flex
        align-items center
        width 50%
        margin-right 72px
        div
          width 100%
          display flex
          justify-content center
          flex-direction column
        .elip
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
</style>
